import React, { useEffect, useRef, useState } from 'react'
import axios from 'axios'

import { styles } from '../utils'

axios.defaults.baseURL = 'http://localhost:8080/'
const MyComment = () => {
  const [comments, setComments] = useState([])

  // 获取列表
  const getCommentsList = async () => {
    const res = await axios.get('/comments', {})
    setComments(res.data)
  }

  useEffect(() => {
    getCommentsList()
  }, [])

  return (
    <div>
      <div style={styles.box}>
        <h2>留言板</h2>
        <ShowMsgCom comments={comments} setComments={setComments}></ShowMsgCom>
        <PostMsgCom getCommentsList={getCommentsList}></PostMsgCom>
      </div>
    </div>
  )
}

// 留言板内容
const ShowMsgCom = ({
  comments,
  setComments
}) => {

  // 删除
  const removeItem = async (item, index) => {
    const res = await axios({
      url: '/comments/' + item.id,
      method: 'Delete'
    })
    comments.splice(index, 1)
    setComments([...comments])
  }

  // 修改
  const updateOne = async (item, index) => {
    const content = window.prompt(item.title, item.content)
    if (content && content !== item.content) {
      item.content = content
      const res = await axios({
        url: '/comments/' + item.id,
        method: 'patch',
        data: {
          content
        }
      })
      console.log(res);
      console.log(item);
      comments.splice(index, 1, { ...item })
      setComments([...comments])
    }
  }


  return (
    <div style={styles.box}>
      <h3>留言展示</h3>
      <div>
        {
          comments.map((item, index) => {
            return (
              <div style={{ margin: '15px 0', background: '#f9c4d2', borderRadius: 10, padding: 5 }} key={item.id}>
                <p>序号：{index + 1}</p>
                <p>标题：{item.title}</p>
                <p>内容：{item.content}</p>
                <p>操作：
                  <button className='learn-more' onClick={() => removeItem(item, index)}>删除</button>
                  <button className='learn-more' onClick={() => updateOne(item, index)}>修改</button>
                </p>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

// 留言板底部
const PostMsgCom = ({
  getCommentsList
}) => {
  const title = useRef()
  const content = useRef()

  // 提交
  const addToComment = async () => {
    if (title.current.value && content.current.value) {
      const res = await axios.post('/comments', {
        title: title.current.value,
        content: content.current.value
      })
      getCommentsList()
      resetData()
    } else {
      alert('请输入内容')
    }
  }

  // 重置
  const resetData = () => {
    title.current.value = ''
    content.current.value = ''
  }

  return (
    <div style={styles.box}>
      <h2>提交留言</h2>
      <div>
        <div>
          标题：<input type="text" className="input" placeholder="Type something here...." ref={title} />
        </div>
        <div>
          内容：<input type="text" className="input" placeholder="Type something here...." ref={content} />
        </div>
        <div>
          <button className='learn-more' onClick={addToComment}>提交</button>
          <button className='learn-more' onClick={resetData}>重置</button>
        </div>
      </div>
    </div>
  )
}



export default MyComment
